<template>
  <div>
    <AppNavbar :fetchProductData="fetchCarouselData"/>
    <div>
      <!-- 使用国际化标题 -->
      <h2>{{ title }}</h2>
      <div class="table-responsive">
        <table class="table">
          <thead>
          <tr>
            <th>{{ t('name') }}</th>
            <th>{{ t('description') }}</th>
            <th>{{ t('stock') }}</th>
            <th>{{ t('image') }}</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="product in filteredProducts" :key="product.id">
            <td @click="goToDetail(product.id)">{{ product.wareName }}</td>
            <td>{{ product.wareSingle }}</td>
            <td>{{ product.stock }}</td>
            <td>
              <img :src="product.wareImg" alt="Product Image" class="table-image">
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import AppNavbar from "@/components/AppNavbar.vue";
  import {computed, inject, ref, onMounted, watch} from 'vue';
  import {useRoute} from 'vue-router';
  import axios from 'axios';

  export default {
    name: 'App',
    components: {
      AppNavbar,
    },
    methods: {
      goToDetail(id) {
        console.log("goToDetail:", id)
        // 跳转到详情页
        this.$router.push({name: 'detailPage', params: {wareId: id}});
      }
    },
    setup() {
      const route = useRoute();
      const currentLocale = inject('locale');
      const i18nMessages = {
        'en': {
          name: 'Name',
          description: 'Description',
          stock: 'Stock',
          image: 'Image',
          title: 'Product List',
        },
        'zh-CN': {
          name: '产品名称',
          description: '简介',
          stock: '库存',
          image: '图片',
          title: '产品列表',
        },
      };

      const t = (key) => {
        return i18nMessages[currentLocale.value][key] || key;
      };

      const title = computed(() => t('title'));

      const filteredProducts = ref([]);

      const fetchCarouselData = async (keyWord) => {
        try {
          const response = await axios.get(
              process.env.VUE_APP_DOMAIN_URL + '/ylwares/ylWares/search', {params: {keyWord}});
          if (response.data) {
            const products = response.data.result;
            filteredProducts.value = products.map(product => {
              const name = currentLocale.value === 'en' ? product.wareNameEn : product.wareName;
              const description = currentLocale.value === 'en' ? product.wareSingleEn
                  : product.wareSingle;
              return {...product, wareName: name, wareSingle: description};
            });
          }
        } catch (error) {
          console.error('Error fetching carousel data:', error);
        }
      };

      // 监听路由参数的变化
      watch(() => route.params.keyWord, (newKeyWord) => {
        fetchCarouselData(newKeyWord);
      });

      // 初始化获取轮播数据
      onMounted(() => {
        fetchCarouselData(route.params.keyWord);
      });

      return {t, title, filteredProducts};
    },
  }
</script>

<style>

  /* 表格基本样式 */
  .table {
    width: 100%;
    border-collapse: collapse; /* 改为collapse以去除单元格间的间隔，使边框连续 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden; /* 保留以维持圆角 */
    background-color: #ffffff;
    margin-top: 20px;
    border: 2px solid #eaeaea; /* 添加整体边框 */
  }

  /* 表头样式 */
  .table th {
    background-color: #0056b3;
    color: #ffffff;
    text-align: left;
    padding: 16px;
    font-size: 16px;
    border-right: 2px solid #ffffff; /* 添加白色边框以与背景色融合，如果需要 */
  }

  /* 单元格样式 */
  .table td {
    padding: 12px 16px;
    border-top: 2px solid #eaeaea; /* 增加边框宽度 */
    border-right: 2px solid #eaeaea; /* 添加垂直分隔线 */
    color: #333333;
    font-size: 14px;
    text-align: left; /* 确保文本对齐 */
    cursor: pointer; /* 更改鼠标指针类型为指针，表示可点击 */
    /*text-decoration: underline; !* 添加下划线 *!*/
  }

  /* 最后一列的单元格和表头不添加右边界，保持边框的连续性 */
  .table th:last-child, .table td:last-child {
    border-right: none;
  }

  /* 行悬浮效果 */
  .table tbody tr:hover {
    background-color: #eff5fc; /* 轻蓝色背景，为悬浮行添加微妙的高亮效果 */
  }

  /* 图片样式 */
  .table-image {
    width: 100px; /* 维持原有图片尺寸 */
    height: auto;
    border-radius: 5px;
  }

  /* 响应式容器 */
  .table-responsive {
    overflow-x: auto;
  }

  /* 高亮第一列，如产品编号或名称，突出显示 */
  .table tbody tr td:first-child {
    color: #0056b3; /* 使用品牌蓝色 */
    font-weight: 600;
  }

  /* 链接样式 - 如果有 */
  a {
    color: #007bff; /* 保留蓝色链接 */
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline; /* 悬浮时下划线 */
  }
</style>
